<template>
	<view class="content">
		<view class="item">
			<view class="tit">
				{{checkobj.checkTitle}}
			</view>
			<view class="pic">
				<img :src="checkobj.checkImg" alt="" mode="heightFix">
			</view>
			<view class="info">
				<view class="lt">
					<img :src="checkobj.avatar" alt="">
				</view>
				<view class="rt">
					{{checkobj.nickName}}
				</view>
			</view>
			<view class="endtime">结束时间:{{checkobj.endTime}}</view>
			<view class="interduce">
				{{checkobj.checkContent}}
			</view>
		</view>
		<button class="btn" @click="showSec">点击参与打卡</button>

		<uni-popup ref="popup" background-color="#fff" @change="change">
			<view class="sec_1">用户名</view>
			<input class="username" type="text" placeholder="请填写信息" v-model="username">
			<view class="sec_2">上传图片</view>
			<view class="userpic">
				<img :src="userpic" alt="" mode="heightFix" v-if="userpic!=0" @click="choosepic">
				<view v-else @click="choosepic">
					点击添加图片
				</view>
			</view>
			<button class="btn" @click="tabcheck(checkid)">确认打卡</button>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkid: '',
				checkobj: {},
				username: '',
				userpic: ''
			}
		},
		onLoad(options) {
			this.checkid = options.checkid
			this.getcheckdetial(this.checkid)
		},
		methods: {
			getcheckdetial(id) {
				this.$api.request({
					url: this.$api.getcheck
				}).then((res) => {
					let data = res.rows
					let restult = data.map((item, index) => {
						if (item.id == id) {
							this.checkobj = item
						}
					})
				})
			},

			showSec() {
				this.$refs.popup.open('bottom')
			},

			choosepic() {
				console.log('选择图片');
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						// tempFilePaths 是图片文件的临时路径列表
						const tempFilePaths = res.tempFilePaths;
						this.userpic = tempFilePaths[0]; // 将选中的图片添加到 images 数组中
					},
				})
			},

			tabcheck(id) {
				uni.showModal({
					title: "提示",
					content: "是否发布本次打卡？",
					success: (res) => {
						if (res.confirm) {

							let obj = {
								checkId: this.checkid,
								username: this.username,
								userpic: this.userpic
							}
							this.$api.request({
								url: this.$api.sendcheck,
								method: "POST",
								data: obj
							}).then((res)=>{
								console.log(res)
							})

							uni.showToast({
								title: '打卡成功',
							})
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index/index' // 根据你的实际首页路径进行修改
								});
							}, 2000)
						}
					},
					fail: () => {
						return
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		width: 100vw;
		height: 97vh;
		padding-top: 3vh;
		background: linear-gradient(to bottom, blue, #4B86B4);

		.item {
			width: 700rpx;
			height: 93vh;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 30rpx;
		}

		.tit {
			width: 100%;
			height: 8vh;
			font-weight: bold;
			font-size: 3vh;
			line-height: 8vh;
			text-align: center;
		}

		.pic {
			width: 100%;
			height: 25vh;
			padding-top: 1vh;
			background-color: #fff;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			overflow: hidden;

			img {
				border-radius: 40rpx;
				height: 100%;
			}
		}


		.info {
			width: 100%;
			height: 8vh;

			.lt {
				float: left;
				width: 8vh;
				height: 8vh;
				border-radius: 4vh;
				text-align: center;
				line-height: 8vh;
				margin: 0 2vw;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.rt {
				height: 8vh;
				line-height: 8vh;
			}
		}

		.btn {
			width: 80vw;
			height: 8vh;
			text-align: center;
			line-height: 8vh;
			position: fixed;
			bottom: 2vh;
			left: 10vw;
			border-radius: 4vh;
			background: linear-gradient(to right, blue, #4B86B4);
			color: #fff;
			font-size: 3vh;
		}

		.sec_1,
		.sec_2 {
			width: 100vw;
			height: 8vh;
			line-height: 8vh;
			padding-left: 5vw;
		}

		.username {
			width: 92vw;
			height: 6vh;
			padding: 0 4vw;
		}

		.userpic {
			width: 100vw;
			height: 14vh;
			margin-bottom: 5vh;

			img {
				width: 12vh;
				height: 12vh;
				margin: 1vh 3vh;
			}

			view {
				width: 12vh;
				height: 12vh;
				margin: 1vh 3vh;
				border: 1rpx dashed #000;
				text-align: center;
				line-height: 12vh;
				border-radius: 1vh;
				font-size: 30rpx;
			}
		}
	}
</style>